<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
    <style>
        .wrapper {
            position: relative;
        }
        ul{
            padding: 0;
            margin: 0;
        }
        .all-tiles{
            border: 1px solid #ccc;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 840px;
            padding:0;
            overflow: hidden;
        }
        .all-tiles li{
            box-sizing: border-box;
            -webkit-sizing: border-box;
            padding:0;
            margin:0;
            display:inline-block;
            width:70px;
            height: 70px;
            border: 1px dashed #AAA;
        }
        .all-tiles li input{
            text-align:center;
        }
        .all-tiles li>label{
            display: block;
            width: 100%;
            height: 100%;
        }
        .checkbox-wrapper:hover::after, .checked.checkbox-wrapper::after{
            content: attr(data-icon);
        }
        textarea {
            width: 100%;
            height: 7em;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.1rem;
        }
    </style>
</head>
<body>
    <div id="app">
        <textarea :value="selected" @keydown="flushSelected"></textarea>
        <hr />
        <div class="wrapper">
            <ul class="all-tiles">
                <li :title="icon.id" v-for="icon in allIcons">
                    <label class="checkbox-wrapper" :class="icon.checked ? 'checked' : ''" :data-icon="icon.id">
                        <input type="checkbox" :checked="icon.checked" @click="selectIcon(icon)"/>
                    </label>
                </li>
            </ul>
            <img src="assets/spritesheets/worldmap.[70,70,228,0,0].png" alt="" />
        </div>
    </div>

<script>
    const WIDTH = 12;
    const HEIGHT = 18;
    var baseNum = 40;
    const allIcons = [];
    for (let i = 0; i < WIDTH * HEIGHT; i++) {
        allIcons.push({
            id: i + baseNum,
            checked: false,
        });
    }
    var app = new Vue({
        el: '#app',
        data: {
            allIcons,
        },
        computed: {
            selected() {
                return this.allIcons.filter((i) => {
                    return i.checked;
                }).map(i => Number(i.id)).join(', ');
            }
        },
        methods: {
            selectIcon(icon) {
                const target = this.allIcons.find((i) => {
                    return i.id === icon.id;
                });
                target.checked = !target.checked;
                
            },
            flushSelected(event) {
                if (event.keyCode === 13) {
                    for (let i = 0; i < this.allIcons.length; i++) {
                        this.allIcons[i].checked = false;
                    }

                    const icons = event.currentTarget.value.split(/\,\s{0,}/).map(i => parseInt(i, 10) || -1).filter(id => id !== -1);
                    
                    for (let i = 0; i < icons.length; i++) {
                        const id = icons[i];
                        const icon = this.allIcons.find(icon => icon.id === id);
                        if (icon) {
                            icon.checked = true;
                        }
                    }
                }
            },
        }
    });
</script>
</body>
</html>